<template>
  <section id="dashboard-navbar" class="fixed z-[900] h-[var(--navbar-height)] w-screen text-sm">
    <SkipLink :text="$t('skip_to_content')" />
    <div
      class="grid h-full grid-cols-[theme(spacing.18)_auto] items-center border-b bg-immich-bg py-2 dark:border-b-immich-dark-gray dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]"
    >
      <a :href="AppRoute.PHOTOS" class="ml-4">
        <ImmichLogo :width="innerWidth < 768 ? '30%' : '55%'" :noText="innerWidth < 768" />
      </a>
      <div class="flex justify-between gap-4 lg:gap-8 pr-6">
        <div class="hidden w-full max-w-5xl flex-1 tall:pl-0 sm:block">
          <SearchBar v-if="$featureFlags.search" grayTheme />
        </div>

        <section class="flex place-items-center justify-end gap-1 md:gap-2 w-full sm:w-auto">
          <CircleIconButton
            v-if="$featureFlags.search"
            :href="AppRoute.SEARCH"
            id="search-button"
            class="sm:hidden"
            :title="$t('go_to_search')"
            :icon="mdiMagnify"
            padding="2"
            @click="() => {}"
          />
          <ThemeButton padding="2" />
          <a-button
            shape="round"
            color="secondary"
            variant="ghost"
            size="giant"
            :title="$t('support_and_feedback')"
            :icon="mdiHelpCircleOutline"
            @click="() => (shouldShowHelpPanel = !shouldShowHelpPanel)"
            :aria-label="$t('support_and_feedback')"
          />
          <a-button
            v-if="!page.url.pathname.includes('/admin') && showUploadButton"
            :leadingIcon="mdiTrayArrowUp"
            @click="onUploadClick"
            class="hidden lg:flex"
            variant="ghost"
            color="secondary"
          >
            {{ $t('upload') }}
          </a-button>
          <CircleIconButton
            v-if="!page.url.pathname.includes('/admin') && showUploadButton"
            @click="onUploadClick"
            :title="$t('upload')"
            :icon="mdiTrayArrowUp"
            class="lg:hidden"
            padding="2"
          />
          <div
            v-click-outside="{
              onEscape: () => (shouldShowAccountInfoPanel = false),
              onOutclick: () => (shouldShowAccountInfoPanel = false),
            }"
          >
            <button
              type="button"
              class="flex pl-2"
              @mouseover="() => (shouldShowAccountInfo = true)"
              @focus="() => (shouldShowAccountInfo = true)"
              @blur="() => (shouldShowAccountInfo = false)"
              @mouseleave="() => (shouldShowAccountInfo = false)"
              @click="() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)"
            >
              <UserAvatar :user="user" size="md" showTitle="false" interactive />
            </button>

            <div
              v-if="shouldShowAccountInfo && !shouldShowAccountInfoPanel"
              v-fade="{ delay: 500, duration: 150 }"
              class="absolute -bottom-12 right-5 rounded-md border bg-gray-500 p-2 text-[12px] text-gray-100 shadow-md dark:border-immich-dark-gray dark:bg-immich-dark-gray"
            >
              <p>{{ user.name }}</p>
              <p>{{ user.email }}</p>
            </div>

            <AccountInfoPanel v-if="shouldShowAccountInfoPanel" :onLogout="onLogout" />
          </div>
        </section>
      </div>
    </div>
  </section>
  <HelpAndFeedbackModal v-if="shouldShowHelpPanel && info" @close="() => (shouldShowHelpPanel = false)" :info="info" />
</template>

<script>
import { mapState } from 'vuex';
import { defineComponent } from 'vue';
import { useI18n } from 'vue-i18n';
import { getAllAlbums } from '@immich/sdk';
import { AppRoute } from '@/constants';
import { handleLogout, logout } from '@/utils/auth';
import { getAboutInfo, type ServerAboutResponseDto } from '@immich/sdk';
import { mdiHelpCircleOutline, mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
import SkipLink from '@/components/elements/buttons/skip-link.vue';
import CircleIconButton from '@/components/elements/buttons/circle-icon-button.vue';
import HelpAndFeedbackModal from '@/components/shared-components/help-and-feedback-modal.vue';
import ImmichLogo from '@/components/shared-components/immich-logo.vue';
import SearchBar from '@/components/shared-components/search-bar/search-bar.vue';
import ThemeButton from '@/components/shared-components/theme-button.vue';
import UserAvatar from '@/components/shared-components/user-avatar.vue';
import AccountInfoPanel from '@/components/shared-components/navigation-bar/account-info-panel.vue';
import vClickOutside from 'v-click-outside';
import { fade } from '@/directives/fade';

export default defineComponent({
  components: {
    SkipLink,
    CircleIconButton,
    HelpAndFeedbackModal,
    ImmichLogo,
    SearchBar,
    ThemeButton,
    UserAvatar,
    AccountInfoPanel,
  },
  props: {
    onUploadClick: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      showUploadButton: true,
      shouldShowAccountInfo: false,
      shouldShowAccountInfoPanel: false,
      shouldShowHelpPanel: false,
      innerWidth: window.innerWidth,
      info: undefined,
    };
  },
  computed: {
    ...mapState(['featureFlags', 'user', 'page']),
    $featureFlags() {
      return this.featureFlags;
    },
    $t() {
      return useI18n().t;
    },
  },
  async mounted() {
    this.info = this.$store.state.userInteraction.aboutInfo ?? (await getAboutInfo());
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    async onLogout() {
      const { redirectUri } = await logout();
      await handleLogout(redirectUri);
    },
    handleResize() {
      this.innerWidth = window.innerWidth;
    },
  },
  directives: {
    'click-outside': vClickOutside,
    fade,
  },
});
</script>

<style scoped>
/* ... existing code ... */
</style>